import {View,Text,TouchableOpacity,StyleSheet, ScrollView,Alert,FlatList,Modal,Image} from 'react-native';
import { useSelector,useDispatch } from 'react-redux';
import { useEffect, useState } from 'react';
const showAlert = (msg,fun) =>
  Alert.alert(
    "提示",
    msg,
    [
      {
        text: "确认",
        onPress: fun,
        style: "cancel",
      },
    ],
    {
      cancelable: false,
    }
  );


  const RenderItem = ({ item,navigation, }) => {
    return (
        <TouchableOpacity style={{marginTop:changeH(20)}} onPress={()=>{navigation.navigate('EDetail',{title:item.history_title,content:item.history_content,brief:item.history_brief})}} activeOpacity={1}>
            <View style={{width:'100%',height:changeH(200)}}>
                <Text style={{marginLeft:changeW(30),marginTop:changeH(15),width:'55%',fontSize:changeW(30),fontWeight:'bold'}} numberOfLines={1} ellipsizeMode='tail'>{item.history_title}</Text>
                <Text style={{marginLeft:changeW(30),marginTop:changeH(15),width:'93%',fontSize:changeW(22)}} numberOfLines={3} ellipsizeMode='tail'>{item.history_brief}</Text>
            </View>
            <Text style={{marginLeft:changeW(30),color:'grey'}}>{item.readnum}次阅读</Text>
            <View style={{width:'100%',height:changeH(5),backgroundColor:'#F5F5F5',marginTop:changeH(10)}}></View>
        </TouchableOpacity>
    )
}


const RenderStudyItem = ({ item,navigation}) => {
  return (
      <TouchableOpacity onPress={()=>{navigation.navigate('Detail',{listcon:item})      
      }}>
      <View style={styles.listview}>
          <Text numberOfLines={1} style={styles.listtitle}>{item.history_title}</Text>
          <View style={styles.usermes}>
              <Image source={{uri:item.userimg}} style={styles.userimg} />
              <Text numberOfLines={1} style={styles.namet}>{item.username}       {item.time}</Text>
          </View>
          <Text numberOfLines={4} style={styles.listcontent}>{item.excerpt}</Text>
          <Image source={{uri:item.history_img}} style={styles.listimg}/>
      </View>
  </TouchableOpacity>
  )
}
const Card = ({name,navigation,data,data1})=>{
    if(name=='ency'){
        return (
            <FlatList
            data={data}
            keyExtractor={(item)=>{return item.title}}
            renderItem={({item}) => {return <RenderItem item={item} navigation={navigation}/>}}
            />
        )
    }else{
      return (
        <View style={{width:"100%",height:0.83*h}}>
                
                    <FlatList
                        data={data1}
                        keyExtractor={(item)=>{return item.title}}
                        renderItem={({item}) => {return <RenderStudyItem item={item} navigation={navigation}/>}}
                        />
            
        </View>
      )
    }
 
}
const LookHistory = ({navigation}) => {
    const list=useSelector(state=>state.list);
    
      const [history,setHistory]=useState([{}]);
      const [study,setStudy]=useState([{}]);
      const [colors,setColors] = useState(['rgb(204,190,151)','rgb(234,234,234)'])
      const [tab,setTab]=useState('ency');
      useEffect(()=>{
        fetch('https://wx.qasdwer.top:8080/user/gethistory',{
                method:'post',
                headers:{
                  'content-type':'application/json;charset=utf-8'
                },
                body:JSON.stringify({account:list.account})
                })
                .then(res=>res.json())
                .then(res=>setHistory(res))
                .catch((error)=>{
                    console.log("Error");
                    throw error;
                }); 
        
        fetch('https://wx.qasdwer.top:8080/user/getstudyhistory',{
                method:'post',
                headers:{
                  'content-type':'application/json;charset=utf-8'
                },
                body:JSON.stringify({account:list.account})
                })
                .then(res=>res.json())
                .then(res=>setStudy(res))
                .catch((error)=>{
                    console.log("Error");
                    throw error;
                }); 
      },[])
        return(
            <View style={{backgroundColor:'white'}}>
              <View style={{width:'100%',display:'flex',marginTop:changeH(15),flexDirection:'row',justifyContent:'space-around',alignItems:'center'}}>
                <TouchableOpacity style={[styles.button,{backgroundColor:colors[0]}]}
                onPress={()=>{
                    setColors(['rgb(204,190,151)','rgb(234,234,234)','rgb(234,234,234)','rgb(234,234,234)'])
                    setTab('ency')
                }}
                ><Text style={styles.text}>百科</Text></TouchableOpacity>
                <TouchableOpacity style={[styles.button,{backgroundColor:colors[1]}]}
                onPress={()=>{
                    setColors(['rgb(234,234,234)','rgb(204,190,151)','rgb(234,234,234)','rgb(234,234,234)'])
                    setTab('study')
                }}
                ><Text style={styles.text}>学习</Text></TouchableOpacity>
            </View>

            <View style={{marginBottom:changeH(200)}}>
            <Card name={tab} navigation={navigation} data={history} data1={study}></Card>
            </View>
            </View>
        )
    
    
}

const styles = StyleSheet.create({
  button:{
      width:changeW(130),
      height:changeH(70),
      display:'flex',
      alignItems:'center',
      justifyContent:'center',
      borderRadius:40
  },
  text:{
      fontSize:changeW(20)
  },
  listview:{
    width:'95%',
    height:changeH(400),
    backgroundColor:'white',
    position:'relative',
    marginLeft:changeW(20),
    marginRight:changeW(20),
    marginTop:changeH(30),
    borderRadius:changeW(30)
},
listtitle:{
    fontSize:changeW(35),
    fontWeight:'bold',
    position:'absolute',
    left:changeW(15),
    top:changeH(20),
    width:'95%',
},
listcontent:{
    color:'rgba(0,0,0,0.7)',
    position:'absolute',
    fontSize:changeW(23),
    top:changeH(200),
    left:changeW(30),
    width:changeW(450),
},
listimg:{
    width:changeW(190),
    height:changeH(170),
    position:'absolute',
    marginTop:changeH(100),
    right:changeW(20),
    borderRadius:changeW(10)
},
userimg:{
    width:changeW(70),
    height:changeW(70),
    borderRadius:changeW(35),
    marginTop:changeH(10)
},
usermes:{
    width:changeW(350),
    height:changeH(90),
    marginTop:changeH(100),
    marginLeft:changeW(30),
    flexDirection:'row',
    justifyContent:'space-between'
},
namet:{
    // lineHeight:changeH(75),
    fontSize:changeW(28),
    marginLeft:changeW(15),
    marginTop:changeH(35)
},
})
export default LookHistory